<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			background:#1C1D26;
			background: #fff;
		}
		#box{
			width: 940px;
			height: 635px;
			margin:25px auto;
		}
		table{
			width: 940px;
			height: 475px;
			table-layout: fixed;
		}
		table tr td{
			/*width: 50px;*/
			height: 50px;
			text-align: center;
			line-height: 50px;	
			overflow: hidden;
			border-radius: 5px; 
		}
		table tr .empty{
			empty-cells: hide;
		}
		.fadegreen{
			background: #81D183;
			border: 1px solid #81D183;
		}
		.blue{
			background: #6575D3;
			border: 1px solid #7A9AE6;
		}
		.yellow{
			background: #D1D157;
			border: 1px solid #F6F661;
		}
		.orange{
			background: #D17D47;
			border: 1px solid #F6914E;
		}
		.green{
			background: #55D157;
			border: 1px solid #61F661;
		}
		.purpoe{
			background: #8591D3;
			border: 1px solid #9BA9F6;
		}
		.deepOrange{
			background: #D17D57;
		}
		colgroup.deepOrange td{
			border: 1px solid #F69161;
		}
		.gray{
			background: #D1D1D3;
			border: 1px solid #F6F6F6;
		}/*
		colgroup.gray td{
		}*/
		.deepPink{
			background: #D17DD3;
		}
		.deepPink td{
			border: 1px solid #F691F6;
		}
	</style>
</head>
<body>
	<div id="box">
		<table cellspacing="0">
			<tr>
				<colgroup rules="all" span="1" class="blue"></colgroup>
				<colgroup span="7" class="yellow"></colgroup>
				<colgroup span="3" class="orange"></colgroup>
				<colgroup span="3" class="green"></colgroup>
				<colgroup span="2" class="purpoe"></colgroup>
				<colgroup span="2" class="deepOrange"></colgroup>
				<td class="fadegreen">html</td>
				<td colspan="15" class="empty"></td>
				<td>col</td>
				<td>table</td>
			</tr>
			<tr>
				<td>head</td>
				<td>span</td>
				<td colspan="8" class="empty"></td>
				<td>div</td>
				<td>fieldset</td>
				<td>form</td>
				<td class="purpoe">body</td>
				<td>h1</td>
				<td>section</td>
				<td>colgroup</td>
				<td>tr</td>
			</tr>
			<tr>
				<td>title</td>
				<td>a</td>
				<td colspan="8" class="empty"></td>
				<td>pre</td>
				<td>meter</td>
				<td>select</td>
				<td class="purpoe">aside</td>
				<td>h2</td>
				<td>header</td>
				<td>caption</td>
				<td>td</td>
			</tr>
			<tr>
				<td>meta</td>
				<td>rt</td>
				<td>dfn</td>
				<td>em</td>
				<td>i</td>
				<td>small</td>
				<td>ins</td>
				<td>s</td>
				<td>br</td>
				<td>p</td>
				<td>blockquote</td>
				<td>legend</td>
				<td>optgroup</td>
				<td class="purpoe">address</td>
				<td>h3</td>
				<td>nav</td>
				<td class="gray">menu</td>
				<td>th</td>
			</tr>
			<tr>
				<td>base</td>
				<td>rp</td>
				<td>abbr</td>
				<td>time</td>
				<td>b</td>
				<td>strong</td>
				<td>del</td>
				<td>kbd</td>
				<td>hr</td>
				<td>ol</td>
				<td>dl</td>
				<td>label</td>
				<td>option</td>
				<td>datalist</td>
				<td>h4</td>
				<td>article</td>
				<td class="gray">command</td>
				<td>tbody</td>
			</tr>
			<tr>
				<td>link</td>
				<td class="blue">noscript</td>
				<td>q</td>
				<td>var</td>
				<td>sub</td>
				<td>mark</td>
				<td>bdi</td>
				<td>wbr</td>
				<td>figcaption</td>
				<td>ul</td>
				<td>dt</td>
				<td>input</td>
				<td>output</td>
				<td>keygen</td>
				<td>h5</td>
				<td>footer</td>
				<td class="gray">summary</td>
				<td>thead</td>
			</tr>
			<tr>
				<td>style</td>
				<td class="blue">script</td>
				<td>cite</td>
				<td>samp</td>
				<td>sup</td>
				<td>ruby</td>
				<td>bdo</td>
				<td>code</td>
				<td>figure</td>
				<td>li</td>
				<td>dd</td>
				<td>textarea</td>
				<td>button</td>
				<td>progress</td>
				<td>h6</td>
				<td>hgroup</td>
				<td class="gray">details</td>
				<td>tfoot</td>
			</tr>
			<tr>
				<td colspan="18" class="empty"></td>
			</tr>
			<tbody class="deepPink">
				<tr>
					<td colspan="6" class="empty" ></td>
					<td>img</td>
					<td>area</td>
					<td>map</td>
					<td>embed</td>
					<td>object</td>
					<td>param</td>
					<td>source</td>
					<td>iframe</td>
					<td>canvas</td>
					<td>track</td>
					<td>audio</td>
					<td>video</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>